import React, { useEffect, useState } from "react";
import { Button, Table, Tag, Popconfirm, Popover, Switch } from "antd";
import axios from "axios";
import { DeleteOutlined, EditOutlined } from "@ant-design/icons";
export default function RightList() {
  //未来动态从后端获取 所以设置成状态比较合理
  const [dataSource, setDataSource] = useState([]);
  //获取渲染数据
  useEffect(() => {
    const getRightList = async () => {
      const res = await axios.get(
        "http://localhost:3000/rights?_embed=children"
      );
      if (res.data[0].children.length === 0) {
        res.data[0].children = null;
      }
      setDataSource(res.data);
    };
    getRightList();
  }, []);

  const columns = [
    {
      title: "ID",
      dataIndex: "id",
      key: "id",
    },
    {
      title: "权限名称",
      dataIndex: "label",
      key: "label",
    },
    {
      title: "权限路径",
      dataIndex: "key",
      key: "key",
      render: (key) => {
        return <Tag color="gold">{key}</Tag>;
      },
    },
    {
      title: "操作",
      render: (item) => {
        // item就是当前行
        return (
          <>
            <Popover
              title="权限状态"
              trigger={item.pagepermisson == undefined ? "" : "click"}
              content={
                <div style={{ textAlign: "center" }}>
                  {/* switch组件的选择与否 是后台传入数据决定的 */}
                  <Switch
                    checked={item.pagepermisson}
                    onClick={() => {
                      switchPermission(item);
                    }}
                  />
                </div>
              }
            >
              <Button
                icon={<EditOutlined color="blue" />}
                shape="circle"
                color="blue"
                disabled={item.pagepermisson == undefined}
              ></Button>
            </Popover>
            <Popconfirm
              title="确定删除吗？"
              okText="确定"
              cancelText="取消"
              onConfirm={() => {
                confirmDelete(item);
              }}
            >
              <Button icon={<DeleteOutlined />} shape="circle" danger></Button>
            </Popconfirm>
          </>
        );
      },
    },
  ];
  const confirmDelete = (item) => {
    console.log(item);
    // 先删除前端状态
    setDataSource(dataSource.filter((data) => data.id !== item.id));

    //二级子项数据删除
    if (item.grade === 1) {
      axios.delete(`http://localhost:3000/rights/${item.id}`).then((err) => {
        if (err) {
          console.log(err);
        }
      });
    } else {
      let list = dataSource.filter((data) => data.id === item.rightId);
      // console.log(list);
      list[0].children = list[0].children.filter((data) => data.id !== item.id);
      setDataSource([...dataSource]);
      axios.delete(`http://localhost:3000/children/${item.id}`);
    }
  };

  //不用查找了 直接配置item就行
  const switchPermission = (item) => {
    //控制前端的状态
    item.pagepermisson = item.pagepermisson === 1 ? 0 : 1;
    setDataSource([...dataSource]); //用来触发重新渲染 数组还是那个数组
    // 控制权限状态 分为一级权限和二级权限 控制后端的pagepermisson
    if (item.grade === 1) {
      // 使用patch请求(补丁更新) 只更新pagepermisson
      axios.patch(`http://localhost:3000/rights/${item.id}`, {
        //item.pagepermisson在前端状态的时候已经更新了
        pagepermisson: item.pagepermisson,
      });
    } else {
      axios.patch(`http://localhost:3000/children/${item.id}`, {
        pagepermisson: item.pagepermisson,
      });
    }
  };

  return (
    <div>
      {/* antd表格 如果设置的数据中存在children属性 就会默认使用树形数据展示 */}
      <Table
        dataSource={dataSource}
        columns={columns}
        pagination={{
          pageSize: 5,
        }}
      />
    </div>
  );
}
